<template>
  <div class="releaseExam">
    <head-Menu></head-Menu>
    <div class="REContainer">
      <h1>发布考试</h1>
      <el-form ref="form" :model="releaseExamForm" label-width="80px" style="width:400px;margin-left:0px;margin:0 auto;text-align:left;">
        <el-form-item label="考试名称">
          <el-input v-model="releaseExamForm.examName" maxlength="30" show-word-limit />
        </el-form-item>
        <el-form-item label="考试时间">
          <el-date-picker v-model="releaseExamForm.examDate" type="datetimerange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" />
        </el-form-item>
        <el-form-item label="答题时长">
          <el-input-number v-if="isUnlimited == false" v-model="releaseExamForm.examTime" controls-position="right" :min="0" :max="180" style="width:130px;margin-right:5px" />
          <el-input-number v-else v-model="releaseExamForm.examTime" controls-position="right" disabled style="width:130px;margin-right:5px" />分钟
          <el-checkbox v-model='isUnlimited' style="margin-left:10px" label="不限时长"></el-checkbox>
        </el-form-item>

        <el-form-item label="考试试卷">
          <el-select v-model="releaseExamForm.examPaper" placeholder="请选择试卷">
            <el-option v-for="data in optionPaper" :label="data" :value="data"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="text-align: center">
          <el-button type="primary" @click="releaseExam">立即创建</el-button>
        </el-form-item>
      </el-form>  
    </div> 
  </div>
</template>

<script>
import headMenu from '../../components/headMenu.vue'
import { releaseExam, getClasses, getTextPaper } from "../../api/user";
import { Toast } from "vant";
export default {
  data() {
    return {
      releaseExamForm: {
        examName: '',
        examDate: '',
        examTime: 0,
        examPaper: '',
        desc: '',
      },
      isUnlimited: false,
      optionPaper: [],
    }
  },
  components: {
    headMenu
  },
  created() {
    this.getTextPaper()
  },
  methods: {

    async getTextPaper() {
      await getTextPaper()
        .then((res) => {
          console.log(res.textPaperName);
          this.optionPaper = res.textPaperName
        })
    },
    async releaseExam() {
      console.log(this.releaseExamForm);
      this.releaseExamForm.examTime = this.releaseExamForm.examTime
      await releaseExam(this.releaseExamForm)
        .then((res) => {
          Toast(res.msg)
        })
    },
  }
}
</script>

<style lang='stylus'>
.releaseExam
  color #666
  flex 1 1 100%
  display block
  .REContainer
    margin 0 10px
    border 1px solid #CCCCCC
    background-color #d3d7d4
    text-align center


.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
  .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }
</style>